<!-- datepicker -->
<link rel="stylesheet" href="template/js/lib/bootstrap-datepicker/css/datepicker.css">
<div class="container">
    <div class="row-fluid">
        <div class="span12">
            <div class="w-box">
                <div class="w-box-header">
                    <h4>Число исходящих звонков</h4>
                </div>
                <div class="w-box-content cnt_b">
                    <div class="row-fluid">
                        <div class="span4">
                            <div class="span6">
                                <label>Начальная дата</label>
                                <div class="input-append date" id="dpStart" data-date-format="dd.mm.yyyy"
                                     data-date="20.11.2012">
                                    <input class="span6" size="16" value="20.11.2012" readonly type="text">
                                    <span class="add-on"><i class="icon-calendar"></i></span>
                                </div>
                            </div>
                            <div class="span6">
                                <label>Конечная дата</label>
                                <div class="input-append date" id="dpEnd" data-date-format="dd.mm.yyyy"
                                     data-date="24.11.2012">
                                    <input class="span6" size="16" value="24.11.2012" readonly type="text">
                                    <span class="add-on"><i class="icon-calendar"></i></span>
                                </div>
                            </div>
                        </div>
                        <div class="span4">
                            <div id="chart_pie" class="chart_a"></div>
                        </div>
                    </div>
                    <br/>
                </div>
            </div>
        </div>

    </div>
</div>
<div class="footer_space"></div>
</div>
<!-- flot charts -->
<script src="template/js/lib/flot-charts/jquery.flot.js"></script>
<script src="template/js/lib/flot-charts/jquery.flot.resize.js"></script>
<script src="template/js/lib/flot-charts/jquery.flot.pie.js"></script>
<script src="template/js/lib/flot-charts/jquery.flot.orderBars.js"></script>
<script src="template/js/lib/flot-charts/jquery.flot.tooltip.js"></script>
<script src="template/js/lib/flot-charts/jquery.flot.time.js"></script>
<script src="template/js/lib/flot-charts/jquery.flot.stack.js"></script>
<script src="template/js/lib/flot-charts/jquery.flot.threshold.js"></script>
<!-- datatables bootstrap integration -->
<script src="template/js/lib/date/date.format.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        if ($('#chart_pie').length) {
            var container = $('#chart_pie');
            var data = [
                {
                    label: "Россия",
                    data: 560
                },
                {
                    label: "Великобритания",
                    data: 360
                },
                {
                    label: "Канада",
                    data: 320
                },
                {
                    label: "США",
                    data: 280
                },
                {
                    label: "Китай",
                    data: 160
                }
            ];

            $.plot(container, data,
                {
                    series: {
                        pie: {
                            show: true,
                            highlight: {
                                opacity: 0.2
                            }
                        }
                    },
                    grid: {
                        hoverable: true,
                        clickable: true
                    },
                    tooltip: true,
                    tooltipOpts: {
                        content: "%s - %p.2%",
                        shifts: {
                            x: 20,
                            y: 0
                        },
                        defaultTheme: false
                    },
                    colors: [ "#6A0050", "#7A1F63", "#A3007A", "#D134AA", "#D15EB4", "#22637e", "#174356", "#0c242e" ]
                }
            );
        }

        if (($('#dpStart').length) && ($('#dpEnd').length)) {
            var d1 = new Date();
            d1.setDate(d1.getDate() - 5);
            d1 = dateFormat(d1, 'dd.mm.yyyy');
            $('#dpStart').data('date', d1);
            $('#dpStart input').val(d1);

            var d2 = new Date();
            d2.setDate(d2.getDate() + 5);
            d2 = dateFormat(d2, 'dd.mm.yyyy');
            $('#dpEnd').data('date', d2);
            $('#dpEnd input').val(d2);

            $('#dpStart').datepicker().on('changeDate', function (ev) {
                var dateText = $(this).data('date'),
                    endDateTextBox = $('#dpEnd input');
                if (endDateTextBox.val() != '') {
                    var testStartDate = new Date(dateText),
                        testEndDate = new Date(endDateTextBox.val());
                    if (testStartDate > testEndDate) {
                        endDateTextBox.val(dateText);
                    }
                } else {
                    endDateTextBox.text(dateText);
                }
                ;
                $('#dpEnd').datepicker('setStartDate', dateText);
                $('#dpStart').datepicker('hide');
            });
            $('#dpEnd').datepicker().on('changeDate', function (ev) {
                var dateText = $(this).data('date'),
                    startDateTextBox = $('#dpStart input');
                if (startDateTextBox.val() != '') {
                    var testStartDate = new Date(startDateTextBox.val()),
                        testEndDate = new Date(dateText);
                    if (testStartDate > testEndDate) {
                        startDateTextBox.text(dateText);
                    }
                } else {
                    startDateTextBox.val(dateText);
                }
                ;
                $('#dpStart').datepicker('setEndDate', dateText)
                $('#dpEnd').datepicker('hide')
            });
        }
    });
</script>